후루's Blog

04. 변수와 상수

@oxlzlo · February 14, 2024 · 5 min read
패스트캠퍼스
부트캠프
프론트엔드-부트캠프
국비지원교육
내일배움카드
KDT

SERIES: study (4)

변수와 상수

  • 변수란?

    • 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’

  • 변수 지정 키워드

    • let, var (var는 현재 잘 사용하지 않음)

변수

변수 선언

let message; // 변수 message를 선언
message = 'Hello World!'; // 변수 message를 문자열 'Hello World!' 로 할당

let message = 'Hello World!'; // 변수 message에 대한 선언과 할당을 한 줄에 작성

console.log(message) // 결과는 둘 다 'Hello Wolrd!' (콘솔창에서 확인 가능)
alert(message); // 결과는 둘 다 'Hello Wolrd!' (페이지 내 알림으로 확인 가능)

  • 여러 변수를 정의

    1.
let user = 'John';
let age = 25;
let message = 'Hello';

2.
let user = 'John',
	age = 25,
	message = 'Hello';

3.
let user = 'John'
	, age = 25
	, message = 'Hello';
    • 위의 세 방식에서 기술적인 차이가 있지는 않다. 개인의 취향

let 대신 var

var message = 'Hello';

console.log(message);
alert(message);
// 둘 다 동일하게 Hello 출력

변수 변경

let message;
message = 'Hello'; // 변수 message에 대한 값

message = 'Wordl!'; // 변수 message에 대한 값 변경

console.log(message);
alert(message);
// 둘 다 동일하게 변경된 값인 World! 출력
  • 이전에 선언한 변수에 다른 값을 할당하게 될 경우, 마지막에 변경 된 값으로 변수 값이 저장 됨
  • 값이 변경되면, 마지막 변경 이전 데이터는 모두 변수에서 제거
let Hello = 'Hello Wolrd!'; // 변수 Hello 선언

let message; // 변수 message 선언

message = Hello; // 변수 message에 변수 Hello 값을 할당 ==> message = Hello = 'Hello World!'

console.log(Hello); // Hello World! 출력
console.log(message); // Hello World! 출력
  • 변수를 두 개 선언하고, 한 변수의 데이터를 다른 변수에 복사
let message = 'this';

let message = 'that'; // SyntaxError: 'message' has already been declared

  • 이미 위에서 선언 된 변수와 같은 변수를 선언하면 에러가 발생한다.

    • 위에서 선언 된 변수를 변경하고 싶을 경우 let 없이 변수명만 사용

변수 명명 규칙

  1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
  2. 첫 글자는 숫자가 될 수 없다.
let userName; //카멜 표기법(camelCase) ==> 단어를 차례대로 나열하며 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성
// ex) let myVeryLongName;
let test123;

let $ = 1;
let _ = 2;
console.log($ + _); // 3 출력
  • 유효한 변수명 예시
let 1a; // 변수명은 숫자로 시작할 수 없다
let my-name; // 하이픈(-)은 변수명에 사용할 수 없다

let let = 5;
let return = 5;
// 예약어는 변수명으로 사용할 수 없다

상수

  • 변화하지 않는 변수를 선언할 때 (생일, 나라 이름, 등등)
  • 선언 이후 값을 재할당 할 수 없다.

  • 상수 지정 키워드

    • const

상수 선언

const myBirthday = '1997.05.08';

myBirthday = '01.01.2020'; // error, can't reassign the constant!
// 값을 재할당 할 수 없다

대문자 상수

  • 기억하기 힘든 값을 변수에 할당해 별칭으로 사용

  • 하드 코딩한 값의 별칭을 만들 때 사용

    • 웹페이지를 로드하는데 걸린 시간, 16진수 컬러값 등
  • 대문자와 밑줄로 구성된 이름으로 명명
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

let color = COLOR_ORANGE;
let color = '#FF7F00';
alert(color); // #FF7F00 출력
  • 기억하기가 훨씬 쉽다 (#FF7F00보다 COLOR_ORANGE)
  • 오타를 낼 확률이 낮다
  • 코드 가독성이 증가한다

바람직한 변수명

  • 변수명은 간결하고, 명확해야 한다.
  • 변수가 담고있는 것이 무엇인지 잘 설명할 수 있어야 한다

  • 참고하기 좋은 규칙

    • userName이나 shoppingCart와 같이 사람이 읽을 수 있는 이름 사용
    • 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 a, b, c와 같은 짧은 이름 등 피하기
    • 최대한 서술적이고 간결하게 (date, value 등은 나쁜 이름의 예시)
    • 자신만의 규칙 혹은 소속된 팀의 규칙 따르기

요약

let, var, const를 사용해 변수를 선언할 수 있다.

선언된 변수엔 데이터를 저장할 수 있다.

  • let - 모던한 변수 선언 키워드
  • var - 오래된 변수 선언 키워드 (현재는 잘 사용하지 않는다)
  • const - let과 비슷하지만, 변수의 값을 변경할 수 없다

과제

변수 가지고 놀기

  1. admin과 name이라는 변수를 선언하세요.

    let admin;
let name;

  2. name에 값으로 "John"을 할당해 보세요.

    name = 'John';

  3. name의 값을 admin에 복사해 보세요.

    admin = name;

  4. admin의 값을 alert 창에 띄워보세요. "John"이 출력되어야 합니다.

    alert(admin);

1

2

올바른 이름 선택하기

  1. 현재 우리가 살고있는 행성(planet)의 이름을 값으로 가진 변수를 만들어보세요. 변수 이름은 어떻게 지어야 할까요?

    let ourPlanetName;

  2. 웹사이트를 개발 중이라고 가정하고, 현재 접속 중인 사용자(user)의 이름(name)을 저장하는 변수를 만들어보세요. 변수 이름은 어떻게 지어야 할까요?

    let currentUserName;

대문자 상수 올바로 사용하기

아래 코드를 평가해 보시기 바랍니다.

const birthday = '18.04.1982';

const age = someCode(birthday);

위 코드의 상수 birthday는 태어난 날짜 정보를 담고 있습니다. age라는 상수는 나이에 관한 값을 담고 있는데 birthday를 조작하여 그 값을 도출합니다(생일을 이용하여 나이를 도출하는 코드는 간결성을 위해 여기선 언급하지 않겠습니다. 이 문제에서 해당 코드가 중요한 역할을 하지 않기도 합니다).

이런 상황에서 birthday를 대문자 상수로 바꾸는 것이 적절할까요? age 역시 대문자 상수로 바꾸는 것이 괜찮은 선택일까요?

const BIRTHDAY = '18.04.1982'; // 대문자 상수로 바꿔도 괜찮을까요?

const AGE = someCode(BIRTHDAY); // 대문자 상수로 바꿔도 괜찮을까

: 대문자 상수는 기억하기 힘든 값이나 하드 코딩한 값의 별칭을 만들 때 주로 사용하기 때문에, 대문자 상수로 바꾸는 것이 괜찮은 선택이라고 생각하지 않았다.

: 반면 해답은 아래와 같다.

대문자 상수는 ‘하드 코딩한’ 값의 별칭을 만들 때 주로 사용합니다. 실행 전에 이미 값을 알고 있고, 코드에서 직접 그 값을 쓰는 경우에 사용하죠.

위 코드에서 birthday가 그런 경우입니다. 따라서 birthday는 대문자 상수로 적합합니다.

반면, age는 런타임에 평가됩니다. 올해의 나이와 내년의 나이는 다르죠. 상수는 코드가 실행될 때마다 바뀌지 않아야 하는 값이란 걸 아마 느끼셨을 겁니다. 이런 관점에서 보았을 때, age는 birthday보다 덜 상수스럽습니다. 런타임에 계산되죠. 따라서 age는 대문자 상수에 적합하지 않습니다.

Next Post
10. if와 ‘?’를 사용한 조건 처리
@oxlzlo
Front-End Developer